<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建节点和插入节点</title>
	</head>
	<body>
		<!-- 创建节点
				 1、createElement() 创建一个新节点，需要传入节点的标签名称，返回创建的元素对象
				 2、createTextNode() 创建一个文本节点，可以传入文本内容
				 3、innerHTML   也能达到创建节点的效果，直接添加到制定位置了
			插入节点
				1、write()  将任意的字符串插入到文档中
				2、appendChild()  向元素中添加新的子节点，作为最后一个子节点
				3、insertBefore()  向指定的已有的节点之前插入新的节点
										newItem:要插入的节点
										exsitingItem:参考节点  需要参考父节点
		 
		 -->
		 
		 <button onclick="addPara();">添加段落</button>
		 <button onclick="addImg();">添加图片</button>
		 <button onclick="addTxt();">添加文本框</button>
		 <button onclick="addOptions();">添加下拉框</button>
		 <select name="music">
			 <option value ="-1">你好，world</option>
			 <option value ="0">南山南</option>
			 <option value ="1">喜欢你</option>
		 </select>
		 <div id="container"></div>
	</body>
	<script type="text/javascript">
		function addPara(){
			//获取容器
			var div=document.getElementById("container");
			// // 方式一
			// //创建p标签
			// var p=document.createElement("p");
			// var text=document.createTextNode("来首歌");
			// //将文本节点加
			// p.appendChild(text);
			// div.appendChild(p);
			
			// //方式二
			// var p=document.createElement("p");
			// p.innerHTML="你好啊";
			// div.appendChild(p);
			
			
			//方式三
			var p="<p>这是第三种方法</p>"
			div.innerHTML+=p;
		}
		function addImg(){
			var div=document.getElementById("container");
			// //方式1
			// for(var i=1;i<4;i++){
			// 	var img=document.createElement("img");
			// 	img.src="img/"+i+".jpg"
			// 	img.weight=300;
			// 	img.height=500;
			// 	div.appendChild(img);
			// }
			
			// //方式2
			// var img=document.createElement("img");
			// img.setAttribute("src","img/1.jpg")
			// div.appendChild(img);
			
			//方式3
			var img="<img src='img/1.jpg' weight=100 height=300/>";
			div.innerHTML+=img;
		}
		
		//添加文本框
		function addTxt(){
			var div=document.getElementById("container");
			var input="<input type='text' value='今天天气不错'>";
			div.innerHTML+=input;
		}
		
		//添加下拉框
		function addOptions(){
			var music=document.getElementsByName("music")[0];
			
			//方法一
			// var opt=document.createElement("option");
			// opt.value="2";
			// opt.text="青花瓷";
			// music.appendChild(opt);
			
			// //方法二
			// var opt=document.createElement("option");
			// opt.value="2";
			// opt.text="青花瓷";
			// music.options.add(opt);
			
			//方法三
			var opt="<option value='2' >青花瓷</option>";
			music.innerHTML+=opt;
			
		}
		
	</script>
</html>
